0
429
ViewsWhy a simple `useEffect` is not taking updated value when it is warping any "setInterval/timeout" inside
Why a simple useEffect is not taking updated value when it is warping any setInterval/timeout inside;
where variable stopped to initial value;
import { useState, useEffect } from "react";
let timerRef;
const StopWatch = () => {
const [time, setTime] = useState(0);
const [isPause, setPause] = useState(false);
useEffect(() => {
timerRef = setInterval(() => {
console.log({ time });
if (!isPause) {
setTime(time + 1);
}
}, 5000);
return () => clearInterval(timerRef);
}, []);
const startWatch = () => {
setPause(false);
};
const stopWatch = () => {
setPause(true);
};
return (
<>
time: {time}
<button onClick={startWatch}>Start</button>
<button onClick={stopWatch}>stop</button>
</>
);
};
export { StopWatch };
·
Juan Pablo Isaza
3 answers
Answer question0
pass dependency of time and this should work
useEffect(() => {
let _time = time;
console.log({ time });
timerRef = setInterval(() => {
console.log({ _time });
if (!isPause) {
setTime(_time + 1);
}
}, 5000);
return () => clearInterval(timerRef);
}, [time]);
·
Juan Pablo Isaza
Report
0
That is because you are accessing time value from the closure, and since you are defining setTimeout handler only once (on initialization) then it will always refer to that initial value for time. I suggest, for this use case, just to use state updater with callback, and like that it will provide you mechanism to easily update state with previos one, and by not accessing state directly. Just rewrite setTime(_time + 1) to setTime(prevTime => prevTime + 1)
·
Juan Pablo Isaza
Report
0
CodeSandbox already warned you about that.
·
Juan Pablo Isaza
Report
Answer question